<template>
	<view class="theme_bg_vice_color">
		<z-paging ref="paging" v-model="bussinesList" fixed @query="queryList">
			<view slot="top" class="theme_bg_color">
				<cu-custom :isBack="true" :bgColor="'bg-white'" :backColor="'text-black'">
					<block slot="backText">
						<view class="text-black ">{{ ScriptInfo.name }}</view>
					</block>
				</cu-custom>

				<view class="cu-card article text-black theme_bg_color">
					<view class=" shadow padding-sm">
						<view class="flex justify-start">
							<image :src="$isHttp(ScriptInfo.picture)" style="width: 220rpx;height: 300rpx;" class="radius12" mode="aspectFill"></image>
							<view class="desc margin-left-sm">
								<view class="flex justify-start margin-top-xs">
									<view class="text-bold ">{{ ScriptInfo.name }}</view>
									<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
								</view>
								<view class="margin-top-sm text-sm">
									人数：{{ ScriptInfo.number }}人
									<text>{{ ScriptInfo.sex_type }}</text>
								</view>
								<view class="margin-top-xs text-sm flex align-end">
									价格：
									<view class="flex align-end text-yellow">
										<view class="text-sm ">会员价¥</view>
										<view class="text-lg text-bold">{{ ScriptInfo.member_price }}</view>
										<view class="text-sm ">/位</view>
										<view class="text-lg text-gray" style="text-decoration:line-through">{{ ScriptInfo.price }}</view>
									</view>
								</view>
								<view class="margin-top-xs text-sm">难度：{{ ScriptInfo.difficulty }}</view>
								<view class="margin-top-xs text-sm">时长：{{ ScriptInfo.hour }}小时</view>
								<view class="margin-top-xs text-sm">发行：{{ ScriptInfo.issue_name }}</view>
							</view>
						</view>
					</view>
					<view class="padding-lr-sm flex align-center justify-between">
						<view class="text-bold">选择商家</view>
						<van-search :value="value" placeholder="请输入搜索关键词" @search="searchBusiness" />
					</view>
				</view>
			</view>
			<view>
				<van-cell-group>
					<van-cell clickable data-name="1" v-for="(item, index) in bussinesList" :key="index">
						<view slot="title" @click="goBussinessById(item.id)">
							<view class="flex justify-start">
								<image :src="$isHttp(item.picture)" mode="aspectFill" class="radius12" style="height: 100rpx;width: 100rpx;"></image>
								<view class="padding-tb-xs flex-direction justify-between margin-left-xs">
									<view class="text-bold">{{ item.StoreName }}</view>
									<view class="flex justify-between text-sm align-center">
										<view class="text-cut" style="width: 320rpx;">{{ item.address }}</view>
										<view>{{ item.distance }}km</view>
									</view>
								</view>
							</view>
						</view>
						<view
							slot="right-icon"
							class="bg-yellow flex align-center text-center padding-sm radius12"
							@click.stop="SelectBussinesById(item.id, item.StoreName, item.city + item.region, item.address, item.telephone)"
						>
							<view class="text-sm">选择</view>
						</view>
					</van-cell>
				</van-cell-group>
			</view>
			<empty-view slot="empty"><view class="text-center padding-top-xl text-gray">暂无商家添加此剧本</view></empty-view>
		</z-paging>
	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	data() {
		return {
			id:'',
			value: '', //搜索商家关键词
			bussinesList: [] //商家列表
		};
	},
	onLoad(option) {
		this.id=option.id
	},
	onUnload() {
		if (this.vuex_bussinessEnter === 0) {
			this.$u.vuex('vuex_bussinessId', '');
			this.$u.vuex('vuex_bussiness', {});
		}
	},
	methods: {
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			// this.$request.queryList(pageNo, pageSize, this.tabIndex + 1, (data) => {
			// 	this.$refs.paging.complete(data);
			// })
			this.$u.api
				.getBussinesListByPlayAndCity({
					city: this.vuex_city,
					play_id: this.ScriptInfo.id,
					longitude: this.vuex_longitude,
					latitude: this.vuex_latitude,
					page: pageNo,
					number: pageSize,
					name: this.value
				})
				.then(res => {
					if (res.code === 200) {
						this.$refs.paging.complete(res.data);
					}
				});
		},
		SelectBussinesById(id, businessName, city, address, telephone) {
			this.BussinessShow = false;
			if (this.vuex_bussinessId == id) return;
			this.$u.vuex('vuex_bussinessId', id);
			this.$u.vuex('vuex_bussiness', {
				store_name: businessName,
				address: city + address,
				telephone: telephone
			});
			this.$goPage('./BeforeAppointment?id='+this.id);
		},
		searchBusiness(e) {
			this.value = e.detail;
			this.$refs.paging.reload();
		},
		goBussinessById(id) {
			this.$goPage('/pageB/business/info?id=' + id);
		},
		async map() {
			//地理编码，获取经纬度
			let re = await uni.request({
				//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
				url: 'https://restapi.amap.com/v3/geocode/geo?parameters?output=JSON&address=' + this.vuex_bussiness.address + '&key=7b7fbe6751d2491c692a1728a6c7afa4'
			});
			let location = re[1].data.geocodes[0].location.split(',');
			await uni.openLocation({
				latitude: parseFloat(location[1]),
				longitude: parseFloat(location[0]),
				name: this.vuex_bussiness.store_name,
				address: this.vuex_bussiness.address,
				success: function() {
					console.log('success');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 主持人
.supporter {
	background-color: #fff;
}

.padding_top_5 {
	padding-top: 5rpx;
}

.padding_le_10 {
	padding-left: 10rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}

.dm {
	width: auto;

	.dm-item {
		width: 210rpx;
		height: 239rpx;
		// background-color: #fff;
		margin-left: 15rpx;
		overflow: hidden;

		&:nth-child(1) {
			margin-left: 0;
		}

		image {
			width: 100%;
			height: 56%;
		}

		position: relative;

		.select {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		.text {
		}
	}
}
</style>
